<template>
  <el-form ref="formRef" :model="form" inline>
    <el-form-item label="客户姓名：" v-if="[1].includes(props.mode as number)">
      <el-autocomplete
        v-model="form.putBy"
        :fetch-suggestions="querySearch"
        class="inline-input"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="联系电话：" v-if="[1].includes(props.mode as number)">
      <el-input v-model="form.putTel" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="设备类型：" v-if="[1].includes(props.mode as number)">
      <el-select
        v-model="form.productType"
        placeholder="请选择"
        @visible-change="getProductTypeList"
      >
        <el-option
          v-for="item in productTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="交付日期：" v-if="[1].includes(props.mode as number)">
      <el-date-picker
        v-model="form.date"
        type="date"
        placeholder="请选择"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
      ></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { get_product_type_list, get_put_by_list } from "@/api/table";
import { ref, reactive, onMounted, watch } from "vue";
import { debounce } from "lodash";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

// props
let props = withDefaults(
  defineProps<{
    mode?: number;
  }>(),
  {
    mode: 1,
  }
);
// emits
let emits = defineEmits<{
  (event: "search", params: Object): void;
}>();

// 客户姓名列表
interface PutByItem {
  value: string;
  link: string;
}
const putByList = ref<PutByItem[]>([]);
const getPutByList = async () => {
  try {
    let res: any = await get_put_by_list({});
    putByList.value = res.list;
  } catch (error) {
    ElMessage({
      message: (error as { message: string }).message,
      type: "error",
    });
  }
};
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? putByList.value.filter(
        (restaurant: PutByItem) =>
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
      )
    : putByList.value;

  cb(results);
};

// 设备类型列表
interface ProductTypeItem {
  label: string;
  value: string;
}
let productTypeList = ref<ProductTypeItem[]>([]);
let getProductTypeList = async (e: boolean) => {
  if (e) {
    try {
      let res: any = await get_product_type_list({});
      productTypeList.value = res.list;
    } catch (error) {
      ElMessage({
        message: (error as { message: string }).message,
        type: "error",
      });
    }
  }
};

// 表单对象
let form = reactive({
  putBy: "",
  putTel: "",
  productType: "",
  date: null,
});
// 一修改就查询
watch(
  form,
  debounce((n: any) => {
    onSubmit(n);
  }, 500)
);
let onSubmit = (n: any) => {
  let params = { ...(n || form) };
  if (params.date) params.date = dayjs(params.date).format("YYYY-MM-DD");
  emits("search", params);
};

// 时间选择器
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

// mounted
onMounted(() => {
  getPutByList();
});

// expose
defineExpose({ onSubmit });
</script>